<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="案例类型" prop="type">
        <el-select v-model="ruleForm.type" placeholder="请选择案例类型">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="案例名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="能力训练类型" prop="abilityType">
        <el-select v-model="ruleForm.abilityType" placeholder="请选择能力训练类型">
          <el-option
            v-for="item in abilityType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="难度等级">
        <el-rate v-model="ruleForm.level" style="margin-top:8px;" />
      </el-form-item>
      <el-form-item label="创始人">
        <el-select v-model="ruleForm.createId" multiple placeholder="请选择创始人">
          <el-option
            v-for="item in teachers"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ruleForm.type === 3" label="视频解答">
        <el-radio-group v-model="ruleForm.videoSolution" size="mini">
          <el-radio-button label="true">是</el-radio-button>
          <el-radio-button label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-else label="翻转案例">
        <el-radio-group v-model="ruleForm.flip" size="mini">
          <el-radio-button label="true">是</el-radio-button>
          <el-radio-button label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标准视频" prop="standardVideo">
        <el-input v-model="ruleForm.standardVideo" />
      </el-form-item>
      <el-form-item label="案例详情">
        <tinymce id="des" v-model="ruleForm.description" :height="300" />
      </el-form-item>
      <template v-if="editid!==0">
        <el-form-item label="OKR">
          <vue2-org-tree
            style="width:100%"
            name="test"
            :data="okr"
            :props="{id: 'id',label: 'name', children: 'list' }"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-class-name="labelClassName"
            :render-content="renderContent"
          />
        </el-form-item>
        <el-form-item>
          <el-table
            :data="table"
            :span-method="objectSpanMethod"
            border
          >
            <el-table-column prop="Objectives" label="Objectives" :width="width" />
            <el-table-column prop="OScore" label="Score" :width="width" />
            <el-table-column prop="KeyResults" label="Key Results" :width="width" />
            <el-table-column prop="KScore" label="Score" :width="width" />
            <el-table-column prop="Capability" label="Capability" :width="width" />
          </el-table>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import TreeMenu from '@/components/TreeMenu'
import caseutil from '@/views/content/case/caseutil'
export default {
  name: 'CaseEdit',
  components: { Tinymce },
  data() {
    return {
      width: '150px',
      ruleForm: {
        id: '',
        name: '',
        type: 1,
        description: '',
        abilityType: '',
        level: 1,
        createId: [],
        videoSolution: true,
        standardVideo: '',
        flip: true
      },
      okr: {},
      editid: 0,
      teachers: [],
      horizontal: true,
      collapsable: false,
      expandAll: true,
      labelClassName: 'bg-white',
      types: [],
      abilityType: [],
      table: [],
      rules: {
        name: [
          { required: true, message: '请输入案例名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        abilityType: [
          { required: true, message: '请选择能力训练类型', trigger: 'blur' }
        ],
        createId: [
          { required: true, message: '请选择创始人', trigger: 'blur' }
        ],
        standardVideo: [
          { required: false, message: '请输入标准视频', trigger: 'blur' }
        ]
      },
      merge: {}
    }
  },
  watch: {
    'ruleForm.type': {
      handler(val, oldVal) {
        this.rules.standardVideo[0].required = val === 2
      }
    }
  },
  created() {
    this.types = this.$store.getters.casetype
    this.getAbilityType()
    this.getTeachers()
    // this.editid = this.$store.getters.params.id
    this.editid = this.$store.getters.params.id || 0
    if (this.editid !== 0) {
      this.ruleForm.id = this.editid
      this.init()
    }
  },
  methods: {
    ...caseutil,
    init() {
      this.get('/neueducase/getone', response => {
        this.ruleForm = response.data.neueducase
        this.okr = response.data.okr
        this.table = this.getTable(this.okr.list)
        const arr = []
        const arr2 = response.data.neueducase.createId.toString().split(',')
        for (let n = 0; n < arr2.length; n++) {
          arr.push(parseInt(arr2[n]))
        }
        this.ruleForm.createId = arr
      }, { id: this.editid })
    },
    renderContent(h, data) {
      return h(TreeMenu, {
        props: {
          obj: data,
          callback: this.init,
          isedit: true
        }
      })
    },
    getTeachers() {
      this.get('/teacher/list', response => {
        this.teachers = response.data
      }, { isDel: 1, type: 1 })
    },
    getAbilityType() {
      this.get('/ability-type/query', response => {
        this.abilityType = response.data
      }, { isDel: 1 })
    },
    onSubmit() {
      this.post('/neueducase/save', 'ruleForm', result => {
        this.redirect('Case')
      }, this.ruleForm)
    }
  }
}
</script>
<style scoped>
  .org-tree-node-label {
    white-space: nowrap;
  }
  .bg-white {
    background-color: white;
  }
  .bg-orange {
    background-color: orange;
  }
  .bg-gold {
    background-color: gold;
  }
  .bg-gray {
    background-color: gray;
  }
  .bg-lightpink {
    background-color: lightpink;
  }
  .bg-chocolate {
    background-color: chocolate;
  }
  .bg-tomato {
    background-color: tomato;
  }
</style>
